<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教师个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">个人信息</h2>

    <div style="margin: 3% 5% 3% 5%;">

      <!-- 个人详情信息 -->
      <el-card style="padding-bottom: 1%;">
        <div>
          <el-button type="primary" @click="dialogFormVisible = true" style="float: right;">修改密码</el-button>
          <el-descriptions class="margin-top" title="详情" :column="3" size="large" border>
            <!-- 姓名 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  姓名
                </div>
              </template>
              {{ teacherInfo.teacherName }}
            </el-descriptions-item>
            <!-- 性别 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  性别
                </div>
              </template>
              {{ teacherInfo.teacherSex }}
            </el-descriptions-item>
            <!-- 电话 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  联系电话
                </div>
              </template>
              {{ teacherInfo.teacherPhone }}
            </el-descriptions-item>
            <!-- 学号 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  教师工号
                </div>
              </template>
              {{ teacherInfo.teacherId }}
            </el-descriptions-item>
            <!-- 班级 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  学院
                </div>
              </template>
              {{ teacherInfo.teacherCollege }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>

      <!-- 对话框 -->
      <el-dialog v-model="dialogFormVisible" title="修改密码">
        <!-- 修改密码 -->
        <div style="margin: 3% 5% 3% 5%;">
          <div style="display: flex; justify-content: center;text-align: center; width: 100%; margin-top: 3%;">
            <el-form :label-position="right" label-width="100px" style="width: 60%">
              <el-form-item label="旧密码" size="large">
                <el-input show-password style="width: 100%" v-model="passwordObj.oldPassword" />
              </el-form-item>
              <el-form-item label="新密码" size="large">
                <el-input show-password style="width:100%" v-model="passwordObj.newpassword" />
              </el-form-item>
              <el-form-item label="重复新密码" size="large">
                <el-input show-password style="width: 100%" v-model="passwordObj.againPassword" />
              </el-form-item>
            </el-form>
          </div>
          <el-row :gutter="20" style="margin-top: 1%;">
            <el-col :span="6" :offset="9">
              <el-button type="primary" @click="changePwd">提交</el-button>
              <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-col>
          </el-row>
        </div>
      </el-dialog>

      <!-- 实践历史
      <h1>实践课题历史</h1>
      <div style="margin-top:2%;">
        <el-table height="550" border stripe style="width: 100%; height:200px;">
          <el-table-column prop="stuId" label="课题" width="180" />
          <el-table-column prop="stuName" label="时间" width="180" />
          <el-table-column prop="stuSex" label="班级" />
          <el-table-column prop="stuPhone" label="联系方式" />
          <el-table-column prop="className" label="报告" />
          <el-table-column prop="className" label="分数" />
        </el-table>
      </div> -->
    </div>

  </div>
</template>
<script  setup>
import { ref, onBeforeMount } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import requests from '@/api/ajax';
import { ElMessage } from 'element-plus';
import router from '@/router';

//初始显示老师所有的教学大纲
const asd = requests({ url: "/inner/myDetil", method: "get", }).then(res => {
  //存储用户信息到浏览器toke
  const abc = res.rdata
  teacherInfo.value = abc

})
  .catch(err => {
    console.error(err);
    // 登录请求失败后的操作
  });

// 数据
const teacherInfo = ref({
  teacherId: '',
  teacherName: "",
  teacherSex: "",
  teacherIdentity: "",
  teacherPhone: "",
  teacherCollege: "",
  teacherPassword: ""
})

//修改密码
const passwordObj = ref({
  oldPassword: '',
  newpassword: '',
  againPassword: '',
})

let dialogFormVisible = ref(false)


function changePwd() {

  if (passwordObj.value.newpassword == passwordObj.value.againPassword) {
    const password = ref({
      oldPass: '',
      newPass: ''
    })
    password.value.newPass = passwordObj.value.newpassword
    password.value.oldPass = passwordObj.value.oldPassword
    const changePassword = requests({ url: "/inner/updatePassword", method: "put", data: password.value }).then(res => {
      if (res.code === 20031) {
        ElMessage.success(res.msg);
        router.push('/');
      } else if (res.code === 20030) {
        ElMessage.warning(res.msg)
      } else {
        ElMessage.warning('服务器错误')
      }
      dialogFormVisible.value = false
    })
      .catch(err => {
        console.error(err);
        // 登录请求失败后的操作
      });
  }else{
    ElMessage.error('重复密码错误！')
  }

}

</script>
<style>
.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>